$(document).ready(function () {
	var View = function() {
		this.buttons = {
			login : $("#btnLogin"),
			logout : $("#btnLogout"),
			showAddTrack : $("#btnShowAddTrack"),
			addTrack : $("#btnAddTrack"),
	
		};
	
		this.frames = {
			nav : $("#frameNav"),
			login : $("#frameLogin"),
			navWorking : $("#frameNavWorking"),
			main : $("#frameMain"),
			mainWorking : $("#frameMainWorking")
		};
	
		this.panels = {
			addTrack : $("#panelAddTrack"),
			viewTrack : $("#panelViewTrack")
		};
	
		this.login = {
			name : $("#txtLoginName"),
			password : $("#txtLoginPassword"),
	
		};
	
		this.nav = {
			user : $("#labelUser"),
			message : $("#labelUserMessage")
		};
	
		this.addTrack = {
			name : $("#txtAddTrackName"),
			location : $("#txtAddTrackLocation"),
	
		};
	
		this.viewTrack = {
			select : $("#selTrack"),
			name : $("#labelViewTrackName"),
			location : $("#labelViewTrackLocation")
		};
		
		return this;
	};

	View.prototype.showMainWorking = function(callback) {
		this.frames.main.slideUp('fast', function() {
			this.frames.mainWorking.slideDown('fast', callback);
		});
	};

	View.prototype.showMain = function(callback) {
		this.frames.mainWorking.slideUp('fast', function() {
			this.frames.main.slideDown('fast', callback);
		});
	};

	View.prototype.showNavWorking = function(callback) {
		this.frames.login.slideUp('fast', function() {
			this.frames.nav.slideUp('fast', function() {
				this.frames.navWorking.slideDown('fast', callback);
			});
		});
	};

	View.prototype.showLogin = function(callback) {
		this.frames.navWorking.slideUp('fast', function() {
			this.frames.nav.slideUp('fast', function() {
				this.frames.login.slideDown('fast', callback);
			});
		});
	};

	View.prototype.showNav = function(callback) {
		this.frames.navWorking.slideUp('fast', function() {
			this.frames.login.slideUp('fast', function() {
				this.frames.nav.slideDown('fast', callback);
			});
		});
	};

	View.prototype.selectTrack = function() {
		var trackId = this.viewTrack.select.children("option:selected").val();
		var track = tracks[trackId];

		this.viewTrack.name.html(track.name);
		this.viewTrack.location.html(track.location);
	};

	View.prototype.updateTracks = function(callback) {
		this.viewTrack.select.children().remove();

		this.viewTrack.select.append($("<option></option>").html("Select a Track")
				.val(""));

		for ( var i = 0; i < tracks.lenght; i++) {
			this.viewTrack.select.append($("<option></option>").html(
					res.tracks[i].name).val(res.tracks[i].id));
		}
	};

	View.prototype.update = function(callaback) {
		this.updateTracks(function() {
			this.selectTrack()
			callback();
		});
	};
	
	view = new View();
});